import './index.less'
import {timer} from '@/utils'
import {BsGeoAlt, BsPower, BsForwardFill} from 'react-icons/bs'
import {useRef} from 'react'
import {history} from 'umi'

function WindowInfo(props) {
  const {detailData, isShow} = props

  const className = useRef('')
  className.current = isShow ? 'window-info active' : 'window-info'

  const style = {fontSize: '3em'}

  return (
    <div className={className.current}>
      <h1 className='title'>{detailData?.name}</h1>
      <h1 className='createdAt'>{timer(detailData?.createdAt)}</h1>
      <div className='info'>
        <p className='key'>租金:</p>
        <p className='value'>{detailData?.rent}</p>
      </div>
      <div className='info'>
        <p className='key'>描述:</p>
        <p className='value'>{detailData?.description}</p>
      </div>
      <div className='address'>
        <BsGeoAlt/>{detailData?.address}
      </div>
      <div className='img-list'>
        {detailData?.houseInfo?.pictures && detailData?.houseInfo?.pictures.split('|').slice(0, 3).map(item => (
          <img src={item} key={item}/>
        ))}
      </div>
      <div className='option'>
        <span onClick={() => {
          history.push({pathname: '/house/house', query: {id: detailData?.id}})
        }}>
          <BsForwardFill style={style}/>
        </span>
        <span onClick={() => {
          props.handleClose()
        }}>
          <BsPower style={style}/>
        </span>
      </div>
    </div>
  )
}

export default WindowInfo
